<template>
	<view>
		<scroll-view :scroll-y="modalName==null" class="page" :class="modalName!=null?'show':''">
			<cu-custom bgColor="bg-gradual-blue" :isBack="true" >
				<block slot="content">安全生产详情</block>
			</cu-custom>
					<view style="padding-bottom: 200rpx;">
						<view class="box">
								<view class="item flex ">
									<view class="label">
										<text style="color: #ff4d4f;"> *</text>
										督查时间：
									</view>
									<view class="val" @click="checktimeShow = true">
										<view :class="detailObj.checktime ? 'val' : 'emptyVal' ">
											{{detailObj.checktime ? detailObj.checktime : '请选择督查时间' }}
										</view>
									</view>
								</view>
								<view class="item flex ">
									<view class="label">
										<text style="color: #ff4d4f;"> *</text>
										企业名称：
									</view>
									<view class="val">
										<view :class="detailObj.enterprisename ? 'monthInput val' : 'emty monthInput'"  @click="enterpriseNameShow=true" >
											{{detailObj.enterprisename?detailObj.enterprisename:'请选择企业名称'}}
										</view>
										<!-- <u-input  border="none" placeholder="请输入企业名称" v-model="detailObj.enterprisename" /> -->
									</view>
								</view>
								<view class="item flex ">
									<view class="label">
										企业地址:
									</view>
									<view class="val">
										<u-input  border="none" placeholder="请输入企业地址" v-model="detailObj.address" />
									</view>
								</view>
								<view class="item flex ">
									<view class="label">
										企业负责人:
									</view>
									<view class="val">
										<u-input  border="none" placeholder="请输入企业负责人" v-model="detailObj.dutyperson" />
									</view>
								</view>
								<view class="item flex ">
									<view class="label">
										负责人手机:
									</view>
									<view class="val">
										<u-input  border="none" type="number" placeholder="请输入负责人手机" v-model="detailObj.dutypersonphone" />
									</view>
								</view>
								<view class="item flex ">
									<view class="label">
										企业联系人:
									</view>
									<view class="val">
										<u-input  border="none" placeholder="请输入企业联系人" v-model="detailObj.connectperson" />
									</view>
								</view>
								<view class="item flex ">
									<view class="label">
										联系人手机:
									</view>
									<view class="val">
										<u-input  border="none" type="number" placeholder="请输入联系人手机" v-model="detailObj.connectphone" />
									</view>
								</view>
							
								<view class="item flex ">
									<view class="label">
										场地情况:
									</view>
									<view class="val">
										<u-input  border="none" placeholder="请输入场地情况" v-model="detailObj.positionstatus" />
									</view>
								</view>
								<view class="item flex ">
									<view class="label">
										占地面积:
									</view>
									<view class="val">
										<u-input  border="none" placeholder="请输入占地面积" v-model="detailObj.landsize" />
									</view>
								</view>
								<view class="item flex ">
									<view class="label">
										建筑面积:
									</view>
									<view class="val">
										<u-input  border="none" placeholder="请输入建筑面积" v-model="detailObj.buildingsize" />
									</view>
								</view>
								<view class="item flex ">
									<view class="label">
										安全生产培训演练状况:
									</view>
									<view class="val" @click="exerciseShow=true"> 
										<view :class="detailObj.exercise ? 'val' : 'emptyVal' ">
											{{detailObj.exercise ? detailObj.exercise : '请选择状况' }}
										</view>
									</view>
								</view>
								
								<view class="item flex ">
									<view class="label">
										风险类型:
									</view>
									<view class="val" @click="risktypeShow=true"> 
										<view :class="detailObj.risktype ? 'val' : 'emptyVal' ">
											{{detailObj.risktype ? detailObj.risktype : '请选择类型' }}
										</view>
									</view>
								</view>
							
								<!-- <view class="item flex ">
									<view class="label">
										有限空间:
									</view>
									<view class="val">
										<u-input  border="none" placeholder="请输入有限空间" v-model="detailObj.limitspace" />
									</view>
								</view>
							
								<view class="item flex ">
									<view class="label">
										珍珠棉:
									</view>
									<view class="val">
										<u-input  border="none" placeholder="请输入珍珠棉" v-model="detailObj.cotton" />
									</view>
								</view>
								<view class="item flex ">
									<view class="label">
										锂电池:
									</view>
									<view class="val">
										<u-input  border="none" placeholder="请输入锂电池" v-model="detailObj.libattery" />
									</view>
								</view>
						
								<view class="item flex ">
									<view class="label">
										再生资源:
									</view>
									<view class="val">
										<u-input  border="none" placeholder="请输入再生资源" v-model="detailObj.renew" />
									</view>
								</view>
								<view class="item flex ">
									<view class="label">
										粉尘涉爆:
									</view>
									<view class="val">
										<u-input  border="none" placeholder="请输入粉尘涉爆" v-model="detailObj.dust" />
									</view>
								</view>
							
								<view class="item flex ">
									<view class="label">
										危化品:
									</view>
									<view class="val">
										<u-input  border="none" placeholder="请输入危化品" v-model="detailObj.chemistry" />
									</view>
								</view>
								<view class="item flex ">
									<view class="label">
										物流存储:
									</view>
									<view class="val">
										<u-input  border="none" placeholder="请输入物流存储" v-model="detailObj.store" />
									</view>
								</view>
						
								<view class="item flex ">
									<view class="label">
										其他:
									</view>
									<view class="val">
										<u-input  border="none" placeholder="请输入其他" v-model="detailObj.other" />
									</view>
								</view> -->
								<view class="item flex ">
									<view class="label">
										<text style="color: #ff4d4f;"> *</text>
										实地督查意见:
									</view>
									<view class="val" style="height: 200rpx;">
										<u--textarea autoHeight height="140"  border="none" v-model="detailObj.advice" 
																	placeholder="请输入实地督查意见"  ></u--textarea>
									</view>
								</view>
							
								<view class="item flex ">
									<view class="label">
										<text style="color: #ff4d4f;"> *</text>
										督查人:
									</view>
									<view class="val" @click="advicepersonShow=true">
										<view :class="detailObj.adviceperson ? 'val' : 'emptyVal' ">
											{{detailObj.adviceperson_dictText ? detailObj.adviceperson_dictText : '请选择督查人' }}
										</view>
										<!-- <u-input  border="none" placeholder="请输入督查人" v-model="detailObj.adviceperson" /> -->
									</view>
								</view>
								<view class="item flex " style="">
									<view class="label">
										企业签名盖章:
									</view>
									<view class="val"  style="display: flex;">
										<image v-if="detailObj.sign" :src="detailObj.sign" style="width: 100rpx;height: 100rpx;transform: rotate(-90deg);" mode=""></image>
										<view class="signBtn" @click="goPage('/pages/safetyProduct/sign')">
											去签名
										</view>
									</view>
								</view>
								<view class="item flex ">
									<view class="label">
										备注:
									</view>
									<view class="val">
										<u-input  border="none" placeholder="请输入备注" v-model="detailObj.remark" />
									</view>
								</view>
								
								<view class="item flex " style="border: 0;">
									<view class="label">
										督查图片:
									</view>
									<!-- picpath -->
								</view>
								<view class="padding flex flex-direction" style="border-bottom: 1px solid #eeeeee;" >
								  <my-image-upload :value="detailObj.picpath" @input="uploadImg"/>
								</view>
								
								<view class="item flex ">
									<view class="label">
										是否需要重检:
									</view>
									<view class="val">
										<!-- <u-input  border="none" placeholder="请输入是否需要重检" v-model="detailObj.needrecheck" /> -->
										  <u-radio-group
										    v-model="detailObj.needrecheck"
										  >
										    <u-radio
										      :customStyle="{marginRight: '15px',marginBottom: '2px'}"
										      label="是"
										      name="是"
										    >
										    </u-radio>
											<u-radio
											  :customStyle="{marginBottom: '2px'}"
											  label="否"
											  name="否"
											>
											</u-radio>
										  </u-radio-group>
									</view>
								</view>
								<view class="item flex " style="border: 0;" v-if="detailObj.needrecheck=='是'">
									<view class="label">
										重检时间:
									</view>
									<view class="val" @click="recheckdateShow = true">
										<view :class="detailObj.recheckdate ? 'val' : 'emptyVal' ">
											{{detailObj.recheckdate ? detailObj.recheckdate : '请选择重检时间' }}
										</view>
									</view>
								</view>
						</view>
					</view>
					<view class="footContent">
							<button class="btn" @click="submitSave" type="default">保存</button>
					</view>
		</scroll-view>
		
		<u-datetime-picker
		        :show="checktimeShow" :minDate="0"
		        v-model="checktime"
		        mode="date"  :closeOnClickOverlay="true" @cancel="checktimeShow=false" @confirm="checktimeConfirm"
		></u-datetime-picker>
		<u-datetime-picker :minDate="0"
		        :show="recheckdateShow"
		        v-model="recheckdate"
		        mode="date"  :closeOnClickOverlay="true" @cancel="recheckdateShow=false" @confirm="recheckdateConfirm"
		></u-datetime-picker>
		<u-picker :show="exerciseShow" :columns="columns" @cancel="exerciseShow=false" @confirm="exerciseConfirm" ></u-picker>
		<u-picker :show="risktypeShow" :columns="risktypeColumns" @cancel="risktypeShow=false" @confirm="risktypeConfirm" ></u-picker>
		<u-picker :show="advicepersonShow" keyName="label" :columns="advicepersonList" @cancel="advicepersonShow=false" @confirm="advicepersonConfirm" ></u-picker>
		
		<popUp :isShow="enterpriseNameShow" title='选择企业名称'
			popupWidth="750rpx" confirmText="确定" activeColor="#1890ff"  mode="bottom"
			@confirm="enterpriseNameConfirm" :isBorderBtn="true" @cancel="enterpriseNameShow=false">
			<view class="popupBox">
				<view class="input">
					<u-search  placeholder="请输企业名称"  :showAction="false"
					bg-color="#f6f6f6" v-model="enterpriseNameKey" @search="enterpriseNameSearch" shape="round"></u-search>
				</view>
				<scroll-view scroll-y="true" style="height:300rpx;margin-top: 30rpx;" @scrolltolower="enterpriseNameScrolltolower">
					<view class="arr">
						<view :class="( selectEnterpriseName.id==item.id) ? 'stewardItem activeIndex' : 'stewardItem'" 
							v-for="(item,index) in enterpriseNameList" :key="index" @click="selectEnterpriseName=item">
							<view class="name">
								{{item.mc}}
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</popUp>
	</view>

</template>

<script>
	import myImageUpload from '@/components/my-componets/my-image-upload.vue'
	import popUp from '@/components/pop-up/pop-up.vue';
	export default {
		components:{
			myImageUpload,popUp
		 },
		data() {
			return {
				modalName: null,
				contractNumber: '',
				enterpriseName: '',
				listUrl:'/assets.security/dbSecurity/list',
				detailObj:{
					checktime : '',
					recheckdate : '',
					advice : '通过',
				},
				pageType : 1,//1新增 2编辑
				editUrl: '/assets.security/dbSecurity/edit',
				addUrl: '/assets.security/dbSecurity/add',
				imgList: [ ],
				checktimeShow : false,
				checktime: Number(new Date()),
				recheckdateShow : false,
				recheckdate: Number(new Date()),
				exerciseShow:false,
				columns: [
				    ['办理中', '未检', '已检']
				],
				risktypeShow : false,
				risktypeColumns:[
					['有限空间','珍珠棉','锂电池','再生资源','粉尘涉爆','危化品','物流存储','其他']
				],
				advicepersonList: [],
				advicepersonShow: false,
				enterpriseNameShow : false,//选择企业
				enterpriseNameKey: '',
				enterpriseName: '',
				selectEnterpriseName: {},
				enterpriseNameList: [],
				enterpriseNamePage: 1,
			}
		},
		methods: {
			enterpriseNameScrolltolower(){
				this.enterpriseNamePage++
				this.getEnterpriseList()
			},
			enterpriseNameSearch(){
				this.enterpriseNamePage = 1
				this.getEnterpriseList()
			},
			enterpriseNameConfirm(){
				this.detailObj.enterprisename = this.selectEnterpriseName.mc
				this.detailObj.address = this.selectEnterpriseName.dz
				this.detailObj.connectperson = this.selectEnterpriseName.lxr
				this.detailObj.connectphone = this.selectEnterpriseName.dh
				this.detailObj.risktype = this.selectEnterpriseName.risktype
				this.enterpriseNameShow = false
			},
			getEnterpriseList(){
				let params ={
					column: 'createTime',
					order: 'desc',
					pageNo: this.enterpriseNamePage,
					pageSize: 10,
					mc: `*${this.enterpriseNameKey}*`
				}
				this.$http.get('/assets.enterprise/dbQyzlb/list',
					{params}
				).then(res=>{
					console.log(res);
						if(res.data.success){
							if(this.enterpriseNamePage==1) this.enterpriseNameList = []
							let list = res.data.result.records
							this.enterpriseNameList = this.enterpriseNameList.concat(list)
							
						}
				})
			},
			uploadImg(e){
				this.detailObj.picpath = e
			},
			veriData(){
				let bool = false
				if(this.detailObj.address && this.detailObj.address.length > 50){
					bool = true
					this.setMessage('企业地址超出输入范围！')
					return bool
				}
				if(this.detailObj.dutyperson && this.detailObj.dutyperson.length > 16){
					bool = true
					this.setMessage('企业负责人超出输入范围！')
					return bool
				}
				if(this.detailObj.dutypersonphone && this.detailObj.dutypersonphone.length > 16){
					bool = true
					this.setMessage('负责人手机超出输入范围！')
					return bool
				}
				if(this.detailObj.connectperson && this.detailObj.connectperson.length > 16){
					bool = true
					this.setMessage('企业联系人超出输入范围！')
					return bool
				}
				if(this.detailObj.connectphone && this.detailObj.connectphone.length > 16){
					bool = true
					this.setMessage('联系人手机超出输入范围！')
					return bool
				}
				if(this.detailObj.positionstatus && this.detailObj.positionstatus.length > 16){
					bool = true
					this.setMessage('场地情况超出输入范围！')
					return bool
				}
				if(this.detailObj.landsize && this.detailObj.landsize.length > 16){
					bool = true
					this.setMessage('占地面积超出输入范围！')
					return bool
				}
				if(this.detailObj.buildingsize && this.detailObj.buildingsize.length > 16){
					bool = true
					this.setMessage('建筑面积超出输入范围！')
					return bool
				}
				
			},
			submitSave(){
				if(!this.detailObj.checktime) return this.setMessage('请先选择督查时间')
				if(!this.detailObj.enterprisename) return this.setMessage('请先输入企业名称')
				if(!this.detailObj.advice) return this.setMessage('请先输入实地督查意见')
				if(!this.detailObj.adviceperson) return this.setMessage('请先输入督查人')
				let bool = this.veriData()
				if(bool) return
				
				if(this.detailObj.needrecheck=='否') this.detailObj.recheckdate = ''
				
				let url = this.pageType==1? this.addUrl : this.editUrl
				console.log(this.detailObj);
				this.$http.post(url,
					this.detailObj
				).then(res=>{
						if(res.data.success){
							this.setMessage('操作成功')
						}
				})
			},
			handleRefresher(){
				this.refresherBool = true
				setTimeout(()=>{
					this.refresherBool = false
				},1000)
				this.handleSearch()
			},
			loadMore(){
				if(this.total == this.list.length) return this.setMessage('没有更多了')
				this.pageNo++
				this.getList()
			},
			getList(){
				if(this.pageNo==1) this.list = []
				
				this.$http.get(this.listUrl,{params:{
					column: 'createTime', 
					order: 'desc', 
					mc: this.$Route.query.name,
					}}).then(res=>{
						if(res.data.success){
							this.detailObj = res.data.result.records[0]
							console.log(this.detailObj);
						}
				})
			},
			checktimeConfirm(e){
				let date = this.dateformat(e.value)
				this.detailObj.checktime = date
				this.checktimeShow = false
			},
			recheckdateConfirm(e){
				let date = this.dateformat(e.value)
				this.detailObj.recheckdate = date
				this.recheckdateShow = false
			},
			exerciseConfirm(e){
				console.log(e);
				this.detailObj.exercise = e.value[0]
				this.exerciseShow = false
			},
			risktypeConfirm(e){
				console.log(e);
				this.detailObj.risktype = e.value[0]
				this.risktypeShow = false
			},
			advicepersonConfirm(e){
				console.log(e);
				this.detailObj.adviceperson = e.value[0].id
				this.detailObj.adviceperson_dictText = e.value[0].label
				this.advicepersonShow = false
			},
			getAdvicepersonList(){
				this.$http.get('/sys/user/list',{}).then(res=>{
						if(res.data.success){
							let arr = []
							 res.data.result.records.forEach(item=>{
								 arr.push({
									 label : item.realname,
									 id: item.id
								 })
							 })
							this.advicepersonList.push(arr) 
						}
				})
			}
			
		},
		onLoad(){
			if(this.$Route.query.name){
				this.pageType = 2
				this.getList()
			}
			this.getAdvicepersonList()
			this.getEnterpriseList()
		},
		onShow() {
			uni.$once('handleSign',(data)=>{
				console.log('成功返回');
				this.detailObj.sign  = data.signUrl
				console.log(this.detailObj);
			})
		}
	}
</script>

<style lang="scss" scoped>
	.monthInput{
		display: flex;
		align-items: center;
		font-size: 32rpx;
		padding-left: 20rpx;
	}
	.emty{
		color: #c0c4cc;
	}
	.signBtn{
		width: 120rpx;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #1890ff;
		border-radius: 8rpx;
		color: #fff;
		margin-left: 50rpx;
	}
	.btn{
		width: 110rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #1890ff;
		border-radius: 8rpx;
		color: #fff;
	}
	.box{
		background-color: #fff;
		margin: 25rpx;
		border-radius: 8rpx;
		padding: 10rpx;
		.row{
			margin: 10rpx;
		}
	}
	.item{
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		width: 100%;
		border-bottom: 1px solid #eee;
	}
	.label{
		color: #333;
		margin-right: 30rpx;
		white-space: nowrap;
		font-size: 30rpx;
		font-weight: 600;  
		padding-left: 30rpx;
	}
	.val{
		flex: 1;
		color: #656565;
		font-size: 32rpx;
		word-break: break-all;
	}
	
	.footContent{
			width: 750rpx;
			height: 186rpx;
			background: #FFFFFF;
			box-shadow: 0px 0px 20rpx 0px rgba(102, 102, 102, 0.05);
			border-radius: 50rpx 50rpx 0px 0px;
			position: fixed;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: space-around;
			font-size: 36rpx;
			z-index: 10;
			.btn{
				width: 600rpx;
				height: 100rpx;
				background: #1890ff;
				border-radius: 50rpx;
				display: flex;
				align-items: center;
				color: #fff;
			}
		}
		
		.val{
			color: #333;
		}
		.emptyVal{
			color: #c0c4cc;
		}
		
	.itemArr-content{
			// margin-top: 20rpx;
			width: 100%;
			background-color: #fff;
			padding-top: 1rpx;
			// padding-bottom: 20rpx;
			// padding-bottom: 500rpx;
			position: relative;
			.line-box{
				height: 20rpx;
				background-color: #f9f9f9;
				width: 100%;
			}
			.item-title{
				margin: 30rpx 50rpx 0;
				color: #333;
				font-weight: 600;
				position: relative;
				font-size: 32rpx;
				margin-bottom: 60rpx;
				&::after{
					content: '';
					position: absolute;
					top: 50%;
					left: -3%;
					transform: translateY(-50%);
					width: 8rpx;
					height: 30rpx;
					background: #1890ff;
					border-radius: 4rpx;
				}
				margin-bottom: 39rpx;
			}
			.clearBtn{
				display: flex;
				align-items: center;
				position: absolute;
				top: 5%;
				right: 5%;
				image{
					width: 30rpx;
					height: 30rpx;
					margin-right: 13rpx;
				}
				color: #1890ff;
			}
			.content{
				width: 681rpx;
				height: calc( 60vh - 200rpx );
				background: #F7FAFC;
				border-radius: 20px;
				margin: 0 auto;
				position: relative;
				.tips{
					position: absolute;
					color: #B6B8D3;
					top: 5%;
					left: 5%;
				}
				
			}
			.btns{
				display: flex;
				align-items: center;
				justify-content: flex-end;
				padding: 15rpx 0;
				.btn{
					// margin-top: 32rpx;
					width: 142rpx;
					height: 80rpx;
					background: #EDEDED;
					border-radius: 40rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #666666;
					font-size: 32rpx;
					margin-right: 30rpx;
					&:nth-child(2){
						color: #fff;
						background-color: #1890ff;
						margin-left: 20rpx;
					}
				}
			}
	}
		
	.popupBox{
		padding: 0 20rpx;
		.inputRow{
			margin-bottom: 30rpx;
			.label{
				font-size: 24rpx;
				width: auto;
			}
		}
		.note{
			margin-bottom: 30rpx;
			margin-left: 10rpx;
			line-height: 30rpx;
			text-align: left;
			.help{
				color: #C9A063;
				margin-left: 15rpx;
			}
			.helpIcon{
				width: 26rpx;
				height: 26rpx;
				display: inline-block;
				margin-left: 10rpx;
				margin-top: 10rpx;
			}
		}
		.stewardItem{
			display: flex;
			align-items: center;
			height: 80rpx;
			font-size: 28rpx;
			color: #333333;
			.name{
				flex: 2;
			}
			.phone{
				flex: 3;
			}
			
		}
		.activeIndex{
			background: #f6f6f6;
		}
			
	}
</style>
